<template>
  <el-card v-loading="loading" class="box-card">
    <el-tabs v-model="activeName">
      <el-tab-pane label="组织架构" name="first">
        <div class="content">
          <!-- 标题部分 -->
          <div class="header">
            <tree-item isroot @add="add" />
            <hr>
          </div>
          <!-- 内容部分 -->
          <div class="body">
            <el-tree
              :data="treeData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
            >
              <template v-slot="{ data }">
                <tree-item :item="data" @del="getData" @add="add" @view="view" />
              </template>
            </el-tree>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <dept-dialog :show-dialog="show" :pid="currentId" @update:showDialog="show = $event" /> -->

    <!--
      .sync 也是个语法糖
      如果你给某个子要的数据加了 .sync
      那么它会自动生成  @update:数据='绑定的值 = $event'
      例如：
        子要数据叫 showDialog

      <子组件  :showDialog="show" />
      如果此时给子要的数据也就是showDiaglog加一个sync
         <子组件  :showDialog.sync="show" />
      它本质上就会生成
         <子组件  :showDialog="show" @update:showDialog="show = $event"/>
     -->
    <dept-dialog ref="depDialog" :show-dialog.sync="show" :pid="currentId" @refresh="getData" />
  </el-card>
</template>

<script>
// 导入接口
import { deptListAPI, deptInfoAPI } from '@/api/department'
// 导入工具
import { array2Tree } from '@/utils'
import TreeItem from './components/TreeItem.vue'
import DeptDialog from './components/DeptDialog.vue'
export default {
  components: {
    TreeItem,
    DeptDialog
  },
  data() {
    return {
      loading: true,
      activeName: 'first',
      treeData: [],
      show: false,
      currentId: ''
    }
  },
  async created() {
    // 加载数据
    await this.getData()
    this.loading = false
  },
  methods: {
    // 加载数据的方法
    async getData() {
      const res = await deptListAPI()

      /*
      function array2Tree(arr, pid) {
        const list = []
        arr.forEach(v => {
          if (v.pid === pid) {
            list.push(v)
          }
        })
        return list
      }

      const list = array2Tree(res.data.depts, '')
      console.log(list)
      // 找这个id下的所有子节点
      const list2 = array2Tree(res.data.depts, '604e2251b205b95968e1312c')
      console.log(list2)

      // 我如果要找三级节点呢？还是调用这个函数，只不过传入2级节点的id作为pid
      // 我如果要找四级节点呢？还是调用这个函数，只不过传入3级节点的id作为pid
      // ...................
      */

      this.treeData = array2Tree(res.data.depts, '')
    },

    add(id) {
      // 1. 显示出对话框
      this.show = true
      // 2. 传递pid
      this.currentId = id
      // 修改标题
      this.$refs.depDialog.title = '新增部门'
    },

    // 点击了查看部门
    async view(id) {
      const res = await deptInfoAPI(id)
      // 利用ref快速父传子，把数据传递给组件
      this.$refs.depDialog.form = res.data
      // 再保存一份原本的名字和编码
      this.$refs.depDialog.oldForm.name = res.data.name
      this.$refs.depDialog.oldForm.code = res.data.code
      // 修改标题
      this.$refs.depDialog.title = '查看部门'
      // 赋值pid
      this.currentId = res.data.pid
      // 显示出对话框
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 50px 100px;
}
</style>
